<template>
	<view class="msg-queue">
		<view class="msg-item" :class="{doing:animating}" @animationend="doAnimation()">
			<image :src="currentMsg.avatar_url" mode="aspectFill" class="avatar" />
			<view class="msg-content">
				<heart-text :text="currentMsg.copy_writing"></heart-text>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			msgs:{
				type:Array,
				default(){
					return []
				}
			}
		},
		data(){
			return{
				doing:false, // 是否循环中,
				animating:false,
				currentMsg:{},
				index:0 // 当前循环下标
			}
		},
		watch:{
			msgs(val){
				if(val.length>0){
					this.start()
				}else{
					this.doing=false
				}
			}
		},
		methods:{
			start(){
				this.doing=true
				this.index=0
				this.currentMsg=this.msgs[0]
				this.animating=true
			},
			doAnimation(){
				if(!this.doing){
					return
				}
				this.animating=false
				setTimeout(()=>{
					let index=this.index
					if(index===this.msgs.length-1){
						index=0
					}else{
						index++
					}
					this.index=index
					this.currentMsg=this.msgs[index]
					this.animating=true
				},0)
			}
		}
	}
</script>

<style scoped lang="scss">
	.msg-queue{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 10;
	}
	.msg-item{
		position: absolute;
		display: flex;
		align-items: center;
		padding: 5rpx 20rpx 5rpx 5rpx;
		font-size: 22rpx;
		color: #fff;
		opacity: 1;
		/* opacity:0; */
		/* transform:translateX(-100%); */
		top:20rpx;
		left: -100%;
		border-radius: 25rpx;
		background-color: rgba(0,0,0,0.6);
	}
	.avatar{
		width: 40rpx;
		height: 40rpx;
		border-radius: 100%;
		margin-right: 4rpx;
	}
	.msg-content{
		line-height: 1;
		white-space: nowrap;
	}
	.doing{
		animation: fade 4s linear;
		animation-delay: 1s;
	}
	@keyframes fade{
		0%{
			left:-100%;
			top:20rpx;
			opacity:1;
		}
		25%{
			left:20rpx;
			top:20rpx;
			opacity:1;
		}
		75%{
			left:20rpx;
			top:20rpx;
			opacity:1;
		}
		100%{
			left:20rpx;
			top:-50rpx;
			opacity:0;
		}
	}
</style>
